<template>
  <div class="app-container">
    <!--    如果user存在-->
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab" @tab-click="handelClick">
              <el-tab-pane label="个人信息统计-图表" name="usercharts">
                <user-charts ref="usercharts" />
              </el-tab-pane>
              <el-tab-pane label="管理员/员工-留言板" name="activity">
                <activity ref="activity" />
              </el-tab-pane>
              <el-tab-pane label="个人操作记录-浏览" name="timeline">
                <timeline ref="timeline" />
              </el-tab-pane>
              <el-tab-pane label="个人信息详情-管理" name="account">
                <account ref="account" :user="user" @reflushData="reloadData" />
              </el-tab-pane>
              <el-tab-pane label="个人账户密码-管理" name="password">
                <password ref="password" />
              </el-tab-pane>
              <el-tab-pane label="个人头像信息-上传" name="avatarupload">
                <avatar-upload ref="avatarupload" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'
import Password from './components/Password'
import UserCharts from './components/UserCharts'
import AvatarUpload from './components/avatar-upload'
const { removeSettingMenu, setMenuByName, getMenus } = require('@/utils/profileStatus')
export default {
  name: 'Profile',
  components: { UserCharts, Password, UserCard, Activity, Timeline, Account, AvatarUpload },
  data() {
    return {
      user: {},
      redirect: '', // 进入该页面重新定向该页面
      activeTab: 'usercharts' // 这里可以做cookie缓存保存上一次用户点的位置，暂时没做
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
        this.setUserinfo()
        this.activeTab = getMenus()
      },
      immediate: true
    }
  },
  inject: ['reload'],
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'userinfo',
      'usercode'
    ])
  },
  mounted() {
    console.log(getMenus())
  },
  methods: {
    handelClick(tab, event) {
      if (tab.name === 'usercharts') {
        console.log('usercharts')
        if (getMenus() !== 'usercharts') {
          this.savaSelectedMenu('usercharts')
          this.reload()
        }
      } else if (tab.name === 'activity') {
        console.log('activity')
        this.savaSelectedMenu('activity')
        this.$refs.activity.getUserActiviInfo()
      } else if (tab.name === 'timeline') {
        console.log('timeline')
        this.savaSelectedMenu('timeline')
        this.$refs.timeline.getOperaData()
      } else if (tab.name === 'account') {
        console.log('account')
        this.savaSelectedMenu('account')
      } else if (tab.namme === 'password') {
        console.log('password')
        this.savaSelectedMenu('password')
      } else {
        console.log('avatarUpload')
        this.savaSelectedMenu('AvatarUpload')
      }
    },
    setUserinfo() {
      this.getUserinfo()
      this.user = this.userinfo
    },
    async getUserinfo() {
      await this.$store.dispatch('user/getInfo')
    },
    reloadData() {
      this.$router.push({ path: this.redirect || '/' })
    },
    savaSelectedMenu(name) {
      if (getMenus()) {
        removeSettingMenu()
      }
      setMenuByName(name)
    }
  }
}
</script>
